<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>周历</title>
    <style type="text/css">
      body {max-width: 400px;margin-left: auto;margin-right: auto}
      h3 {margin-top: 40px;}

      ul,li {list-style: none;}
      .myWeeklyCalendar {padding: 0;margin: 0}
      .datetime_header {text-align: center;padding-top:15px;padding-bottom: 15px;font-size: 16px;border-bottom: 1px solid #dedede}
      .prev_icon,
      .next_icon {display: inline-block;vertical-align: top;width: 20px;height: 20px;}
      .prev_icon {margin-right: 20px;background:url()
      no-repeat}
      .next_icon {margin-left: 20px;background:url()
      no-repeat}
      .prev_icon:active,
      .next_icon:active,
      .weeklyCalendarBox li a:active {opacity: .8}
      .weeklyBox,.weeklyCalendarBox {overflow: hidden;font-size: 14px;}
      .weeklyBox {padding-top: 10px;padding-bottom: 5px;}
      .weeklyBox li {line-height: 30px}
      .weeklyBox li,
      .weeklyCalendarBox li {float: left;width: 14.28571428%;text-align: center;color: #656565}
      .weeklyCalendarBox li a {display: inline-block;width: 30px;line-height: 30px;border-radius: 100%;color:#222;text-decoration: none;border:1px solid transparent}
      
      .weeklyCalendarBox li.active a:not(.disabled) {background:#0d87ea;color: #fff;}
      .weeklyCalendarBox li.clickActive a {border:1px solid #0d87ea;color: #0d87ea}
      .weeklyCalendarBox li a.is-todo {position: relative;}
      .weeklyCalendarBox li a.is-todo::after {content: '.';
        position: absolute;left: 50%;margin-left: -3px;bottom: -3px;font-size: 30px;color: #0d87ea
      }
      .weeklyCalendarBox li a.is-disabled {color: #ccc;pointer-events: none}
    </style>
    </head>
  <body>
    <h3>默认周历</h3>
    <div id="j_weeklyCalendar" class="myWeeklyCalendar">
      <div class="datetime_header">
          <a href="javascript:;" title="上一周" class="prev_icon" role="prev_week"></a>
          <span><b role="year_selector"></b>年<b role="month_selector"></b>月</span><span style="margin-left: 20px;display: none">第<b role="week_selector"></b>周</span>        
          <a href="javascript:;" title="下一周" class="next_icon" role="next_week"></a>
      </div>
      <ul role="weeks_ch" class="weeklyBox"></ul>
      <ul role="weeklyCalendarView" class="weeklyCalendarBox"></ul>
    </div>


    <h3>设置默认选中日期</h3>
    <div id="j_weeklyCalendar2" class="myWeeklyCalendar">
      <div class="datetime_header">
          <a href="javascript:;" title="上一周" class="prev_icon" role="prev_week"></a>
          <span><b role="year_selector"></b>年<b role="month_selector"></b>月</span><span style="margin-left: 20px;display: none">第<b role="week_selector"></b>周</span>        
          <a href="javascript:;" title="下一周" class="next_icon" role="next_week"></a>
      </div>
      <ul role="weeks_ch" class="weeklyBox"></ul>
      <ul role="weeklyCalendarView" class="weeklyCalendarBox"></ul>
    </div>


    <h3>设置禁用日期</h3>
    <div id="j_weeklyCalendar3" class="myWeeklyCalendar">
      <div class="datetime_header">
          <a href="javascript:;" title="上一周" class="prev_icon" role="prev_week"></a>
          <span><b role="year_selector"></b>年<b role="month_selector"></b>月</span><span style="margin-left: 20px;display: none">第<b role="week_selector"></b>周</span>        
          <a href="javascript:;" title="下一周" class="next_icon" role="next_week"></a>
      </div>
      <ul role="weeks_ch" class="weeklyBox"></ul>
      <ul role="weeklyCalendarView" class="weeklyCalendarBox"></ul>
    </div>


    <h3>设置待办日期</h3>
    <div id="j_weeklyCalendar4" class="myWeeklyCalendar">
      <div class="datetime_header">
          <a href="javascript:;" title="上一周" class="prev_icon" role="prev_week"></a>
          <span><b role="year_selector"></b>年<b role="month_selector"></b>月</span><span style="margin-left: 20px;display: none">第<b role="week_selector"></b>周</span>        
          <a href="javascript:;" title="下一周" class="next_icon" role="next_week"></a>
      </div>
      <ul role="weeks_ch" class="weeklyBox"></ul>
      <ul role="weeklyCalendarView" class="weeklyCalendarBox"></ul>
    </div>

    <h3>设置周一开始</h3>
    <div id="j_weeklyCalendar5" class="myWeeklyCalendar">
      <div class="datetime_header">
          <a href="javascript:;" title="上一周" class="prev_icon" role="prev_week"></a>
          <span><b role="year_selector"></b>年<b role="month_selector"></b>月</span><span style="margin-left: 20px;display: none">第<b role="week_selector"></b>周</span>        
          <a href="javascript:;" title="下一周" class="next_icon" role="next_week"></a>
      </div>
      <ul role="weeks_ch" class="weeklyBox"></ul>
      <ul role="weeklyCalendarView" class="weeklyCalendarBox"></ul>
    </div>

    <script src="js/weeklyCalendar.js"></script>
    <script type="text/javascript"> 
     // 默认周历
      weeklyCalendar('#j_weeklyCalendar',{
        //点击日期回调
        clickDate:function(dateTime){
          console.log(dateTime);
        }
      });  
      
      //设置默认选中日期
       weeklyCalendar('#j_weeklyCalendar2',{
        defaultDate:'2019-01-31',
        //获取选中日期
        getSelectedDate:function(dateTime){  
          console.log("selected",dateTime);
        }
      });  

      //设置禁用日期
       weeklyCalendar('#j_weeklyCalendar3',{
        disabledDate:['2021-12-10','2021-12-08','2021-12-07'],
        clickDate:function(dateTime){
          console.log(dateTime);
        }
      }); 
      
      //设置待办日期
       weeklyCalendar('#j_weeklyCalendar4',{
        toDoDate:['2021-12-13','2021-12-15'],
        clickDate:function(dateTime){
          console.log(dateTime);
        }
      }); 

      //设置周一开始
       weeklyCalendar('#j_weeklyCalendar5',{        
         isStartMon: true
      }); 

     </script>
  </body>
</html>
